<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>EaseWord</title>
	<link rel="stylesheet" href="./css/bootstrap.css"/>
	<script type="text/javascript" src="./lib/jquery.min.js"></script>
	<script type="text/javascript" src="./lib/bootstrap.min.js"></script>
	<script type="text/javascript" src="./lib/show-password.min.js"></script>
	<script type="text/javascript" src="./lib/crypto-js/core.js"></script>
	<script type="text/javascript" src="./lib/crypto-js/md5.js"></script>
	<script type="text/javascript" src="./lib/crypto-js/enc-base64.js"></script>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<style type="text/css">
h1 {color:white;width:100%;}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
	</style>
	<script>
window.a=function(s){return document.getElementById(s);};
window.qwe=function(){check();loadpwd();}
window.onload=function(){a('result').value='';a('password').value='';a('name').value='';a('password').onkeydown=function(e){if(e&&e.keyCode==13)a('name').focus();};a('name').onkeydown=function(e){if(e&&e.keyCode==13)qwe();};
window.PASSWORD=getQuery('pass');
if (window.HasPass=Boolean(PASSWORD)) {
	a('password').value='0123456789ABCDEF';
	a('password').setAttribute('readonly','true');
	$('#goto').hide();
} else {
	$('#password').attr({
		"data-eye-class":"material-icons",
		"data-eye-open-class":"visibility",
		"data-eye-close-class":"visibility_off",
		"data-eye-class-position-inside":"true",
		"data-message":"Show/Hide the password",
		"data-placement":"after",
		"data-toggle":"password"
	});
	$('#password').password();
}
};
window.loadpwd=function(){a('result').value=get(window.PASSWORD,a('name').value.toLowerCase());copy();};
window.copy=function(){a('result').select();document.execCommand('copy');a('title').innerText='EaseWord (Copied)';setTimeout("window.a('title').innerText='EaseWord'",1000);}
window.check=function(){if(!HasPass)window.PASSWORD=CryptoJS.MD5(a('password').value).toString();};
function getQuery(name) {
	var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]);
	return null;
}
function get(pass,name) {
	var calc = CryptoJS.algo.MD5.create();
	calc.update('KafuuChino kawaii');
	calc.update(pass);
	calc.update('EaseWord');
	calc.update(name);
	calc.update('long live frog');
	var ret = calc.finalize();
	ret = CryptoJS.enc.Base64.stringify(ret);
	ret = ret.substring(0,16);
	return ret;
}

	</script>
</head>
<body class="active-stream" style="width:100%;height:100%;padding:50px;padding-top:20px;background-color:#2196F3;">
	<h1 id="title">EaseWord</h1>
	<input class="form-control input-lg" id="password" type="password" placeholder="Password">
	<input class="form-control input-lg" style="margin-top:20px;" id="name" type="text" class="form-control" placeholder="ID">
	<button onclick="qwe();" class="btn btn-primary" style="width:100%;background-color:#FF4081;margin-top:20px;">Get Password</button>
	<button onclick="check();var d=a('result');var s=window.location.href;if(s.indexOf('?')>0)s=s.substring(0,s.indexOf('?'));s+='?pass='+PASSWORD;window.location.href=s;" class="btn btn-primary" id="goto" style="width:100%;background-color:#FF5722;margin-top:20px;">Goto Website with This Password</button>
	<input id="result" style="width:100%;font-size:20px;background:transparent;border:transparent;color:white;" readonly></input>
</body>
</html>